<!--<template>-->
<!--  &lt;!&ndash; 放大镜遮罩 &ndash;&gt;-->
<!--  <div v-show="showMask" id="mask" class="mask">-->
<!--    &lt;!&ndash; 遮罩 &ndash;&gt;-->
<!--    <div-->
<!--      v-for="item in masks"-->
<!--      :key="item.key"-->
<!--      class="rect-mask"-->
<!--      :style="{-->
<!--        width: item.width + 'px',-->
<!--        height: item.height + 'px',-->
<!--        left: item.left + 'px',-->
<!--        top: item.top + 'px'-->
<!--      }" />-->
<!--    &lt;!&ndash; 可视区 &ndash;&gt;-->
<!--    <div-->
<!--      class="rect"-->
<!--      :style="{-->
<!--        width: rectStyle.width + 'px',-->
<!--        height: rectStyle.height + 'px',-->
<!--        left: rectStyle.left + 'px',-->
<!--        top: rectStyle.top + 'px'-->
<!--      }"-->
<!--      @mousedown="mousedown($event)">-->
<!--      &lt;!&ndash; <div class="circle"></div> &ndash;&gt;-->
<!--      <img alt="" src="@/assets/images/gis/p.png">-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { throttle } from 'lodash-es'-->
<!--export default {-->
<!--  components: {},-->
<!--  data() {-->
<!--    return {-->
<!--      showMask: false,-->
<!--      rectStyle: {-->
<!--        width: 200,-->
<!--        height: 200,-->
<!--        left: 0,-->
<!--        top: 0-->
<!--      },-->
<!--      masks: [-->
<!--        {-->
<!--          key: 'rect1Style',-->
<!--          width: 0,-->
<!--          height: 0,-->
<!--          left: 0,-->
<!--          top: 0-->
<!--        },-->
<!--        {-->
<!--          key: 'rect2Style',-->
<!--          width: 0,-->
<!--          height: 0,-->
<!--          left: 0,-->
<!--          top: 0-->
<!--        },-->
<!--        {-->
<!--          key: 'rect3Style',-->
<!--          width: 0,-->
<!--          height: 0,-->
<!--          left: 0,-->
<!--          top: 0-->
<!--        },-->
<!--        {-->
<!--          key: 'rect4Style',-->
<!--          width: 0,-->
<!--          height: 0,-->
<!--          left: 0,-->
<!--          top: 0-->
<!--        },-->
<!--        {-->
<!--          key: 'rect5Style',-->
<!--          width: 0,-->
<!--          height: 0,-->
<!--          left: 0,-->
<!--          top: 0-->
<!--        },-->
<!--        {-->
<!--          key: 'rect6Style',-->
<!--          width: 0,-->
<!--          height: 0,-->
<!--          left: 0,-->
<!--          top: 0-->
<!--        },-->
<!--        {-->
<!--          key: 'rect7Style',-->
<!--          width: 0,-->
<!--          height: 0,-->
<!--          left: 0,-->
<!--          top: 0-->
<!--        },-->
<!--        {-->
<!--          key: 'rect8Style',-->
<!--          width: 0,-->
<!--          height: 0,-->
<!--          left: 0,-->
<!--          top: 0-->
<!--        }-->
<!--        // {-->
<!--        //   key: "rect9Style",-->
<!--        //   width: 0,-->
<!--        //   height: 0,-->
<!--        //   left: 0,-->
<!--        //   top: 0-->
<!--        // }-->
<!--      ]-->
<!--    }-->
<!--  },-->
<!--  computed: {},-->
<!--  watch: {},-->
<!--  created() {},-->
<!--  mounted() {},-->
<!--  beforeCreate() {}, // 生命周期 - 创建之前-->
<!--  beforeMount() {}, // 生命周期 - 挂载之前-->
<!--  beforeUpdate() {}, // 生命周期 - 更新之前-->
<!--  updated() {}, // 生命周期 - 更新之后-->
<!--  beforeDestroy() {}, // 生命周期 - 销毁之前-->
<!--  destroyed() {}, // 生命周期 - 销毁完成-->
<!--  activated() {},-->
<!--  methods: {-->
<!--    openMask() {-->
<!--      this.showMask = !this.showMask-->
<!--      if (!this.showMask) return-->
<!--      const that = this-->
<!--      this.$nextTick(() => {-->
<!--        const workbenchPosition = that.getDomTopLeftById()-->
<!--        const currX = workbenchPosition.width / 2 - 100-->
<!--        const currY = workbenchPosition.height / 2 - 100-->
<!--        that.rectStyle.left = currX-->
<!--        that.rectStyle.top = currY-->
<!--        that.computedMasks(currX, currY, workbenchPosition)-->
<!--      })-->
<!--    },-->
<!--    mousedown(e) {-->
<!--      e.preventDefault()-->
<!--      e.stopPropagation()-->
<!--      const startX = e.clientX-->
<!--      const startY = e.clientY-->

<!--      const that = this-->
<!--      const x = that.rectStyle.left-->
<!--      const y = that.rectStyle.top-->
<!--      const workbenchPosition = that.getDomTopLeftById()-->
<!--      const mousemove = throttle(moveEvent => {-->
<!--        // const moveX = moveEvent.screenX;-->
<!--        // const moveY = moveEvent.screenY;-->
<!--        const moveX = moveEvent.clientX-->
<!--        const moveY = moveEvent.clientY-->
<!--        if (moveX === startX && moveY === startY) {-->
<!--          return-->
<!--        }-->
<!--        const sx = startX - workbenchPosition.left-->
<!--        const sy = startY - workbenchPosition.top-->
<!--        const mx = moveX - workbenchPosition.left-->
<!--        const my = moveY - workbenchPosition.top-->
<!--        const dx = mx - sx-->
<!--        const dy = my - sy-->
<!--        let currX = Math.round(dx + x)-->
<!--        let currY = Math.round(dy + y)-->
<!--        // 边界检测-->
<!--        if (currY <= 0) {-->
<!--          currY = 0-->
<!--        }-->
<!--        if (currY >= workbenchPosition.height - 200) {-->
<!--          currY = workbenchPosition.height - 200-->
<!--        }-->
<!--        if (currX <= 0) {-->
<!--          currX = 0-->
<!--        }-->
<!--        if (currX >= workbenchPosition.width - 200) {-->
<!--          currX = workbenchPosition.width - 200-->
<!--        }-->
<!--        that.rectStyle.left = currX-->
<!--        that.rectStyle.top = currY-->

<!--        that.computedMasks(currX, currY, workbenchPosition)-->

<!--        return-->
<!--      }, 0)-->

<!--      const mouseup = () => {-->
<!--        document.removeEventListener('mousemove', mousemove)-->
<!--        document.removeEventListener('mouseup', mouseup)-->
<!--      }-->
<!--      document.addEventListener('mousemove', mousemove)-->
<!--      document.addEventListener('mouseup', mouseup)-->
<!--    },-->
<!--    getDomTopLeftById() {-->
<!--      const dom = document.getElementById('mask')-->
<!--      let top = 0-->
<!--      let left = 0-->
<!--      let width = 0-->
<!--      let height = 0-->
<!--      if (dom != null) {-->
<!--        top = dom.getBoundingClientRect().top-->
<!--        left = dom.getBoundingClientRect().left-->
<!--        width = dom.clientWidth-->
<!--        height = dom.clientHeight-->
<!--      }-->
<!--      return { top: top, left: left, width: width, height: height }-->
<!--    },-->
<!--    computedMasks(currX, currY, workbenchPosition) {-->
<!--      this.masks[0].left = 0-->
<!--      this.masks[0].top = 0-->
<!--      this.masks[0].width = currX + 1-->
<!--      this.masks[0].height = currY-->

<!--      this.masks[1].left = currX-->
<!--      this.masks[1].top = 0-->
<!--      this.masks[1].width = 200-->
<!--      this.masks[1].height = currY-->

<!--      this.masks[2].left = currX + 200 - 1-->
<!--      this.masks[2].top = 0-->
<!--      this.masks[2].width = workbenchPosition.width - currX - 200 + 1-->
<!--      this.masks[2].height = currY-->

<!--      this.masks[3].left = 0-->
<!--      this.masks[3].top = currY-->
<!--      this.masks[3].width = currX + 1-->
<!--      this.masks[3].height = 200-->

<!--      this.masks[4].left = currX + 200 - 1-->
<!--      this.masks[4].top = currY-->
<!--      this.masks[4].width = workbenchPosition.width - currX - 200 + 1-->
<!--      this.masks[4].height = 200-->

<!--      this.masks[5].left = 0-->
<!--      this.masks[5].top = currY + 200-->
<!--      this.masks[5].width = currX + 1-->
<!--      this.masks[5].height = workbenchPosition.height - currY - 200-->

<!--      this.masks[6].left = currX-->
<!--      this.masks[6].top = currY + 200-->
<!--      this.masks[6].width = 200-->
<!--      this.masks[6].height = workbenchPosition.height - currY - 200-->

<!--      this.masks[7].left = currX + 200 - 1-->
<!--      this.masks[7].top = currY + 200-->
<!--      this.masks[7].width = workbenchPosition.width - currX - 200 + 1-->
<!--      this.masks[7].height = workbenchPosition.height - currY - 200-->
<!--    }-->
<!--  } // 如果页面有keep-alive缓存功能，这个函数会触发-->
<!--}-->
<!--</script>-->
<!--<style lang="scss" scoped>-->
<!--.mask {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  position: absolute;-->
<!--  top: 0;-->
<!--  left: 0;-->
<!--  .rect {-->
<!--    position: absolute;-->
<!--    // width: 200px;-->
<!--    // height: 200px;-->
<!--    // border-radius: 8px;-->
<!--    cursor: pointer;-->
<!--    .circle {-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--      border: 5px solid rgb(64, 57, 57);-->
<!--      border-radius: 50%;-->
<!--    }-->
<!--    .img {-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--    }-->
<!--  }-->
<!--  .rect-mask {-->
<!--    position: absolute;-->
<!--    background-color: black;-->
<!--  }-->
<!--}-->
<!--</style>-->
